{% extends 'news/base.html' %}
{% load static %}
{% block style %}
    <link rel="stylesheet" href="{% static 'news/css/hy.css' %}">

{% endblock %}

{% block c_right %}
    <form action="{% url 'news:hycz' %}" method="post">
    {% csrf_token %}
    <div class="dang">
        <div class="wo">
            <div></div><b>我的会员</b>
            <span>当前 <a href="">VIP{{ author.vip }}</a>级, 本月剩余文章发布次数: <a href="">2</a>次</span>
           <input type="submit" value="续费/升级">
        </div>
        <p></p>

        <div class="hui">
            <div class="vip_0"></div><b>会员等级说明</b>
            <div class="vip_1">
                <img src="../../static/news/media/web/v1.png">
                <span>￥2000</span>
                <b>每个月可免费发布2条新闻</b>
            </div>
            <div class="vip_2">
                <img src="../../static/news/media/web/v2.png">
                <span>￥5000</span>
                <b>每个月可免费发布5条新闻</b>
            </div>
            <div class="vip_3">
                <img src="../../static/news/media/web/v3.png">
                <span>￥10000</span>
                <b>每个月可免费发布10条新闻</b>
            </div>
        </div>
        <p></p>
        <div class="buy">
            <div></div><b>购买记录</b>
            {% for p in pay %}
                <p>

                    <span>交易记录:{{ p.title }}</span>
                    <span> {{ p.money }}</span>
                    <span>{{ p.datetime|date:"Y-m-d" }}</span>


                </p>

            {% endfor %}
        </div>

    </div>


    </form>

    {#分页#}
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg">
            {% if contacts.has_previous %}
                <li>
                    <a href="?page={{ contacts.previous_page_number }}" aria-label="Previous" target="_parent" >
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            {% endif %}

            {% for pg in contacts.paginator.page_range %}
                {% if contacts.number == pg %}
                    <li class="active"><a href="?page={{ pg }}" target="_parent" class="box" style="display: inline-block; width: 20px; height: 20px;position: absolute; left: 600px;bottom: -100px; border: 1px solid black;text-align: center;line-height: 20px;">{{ pg }}</a></li>
                {% else %}
                    <li><a href="?page={{ pg }}" target="_parent">{{ pg }}</a></li>
                {% endif %}
            {% endfor %}
            {% if contacts.has_next %}
                <li>
                    <a href="?page={{ contacts.next_page_number }}" aria-label="Next" target="_parent">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>


{% endblock %}
{% block js %}
    <script src="/static/js/bootstrap1/js/bootstrap.js"></script>
    <script>
        $(".hui div").click(function () {
           $(this).css('border', '2px solid #1992EF');
            $(this).siblings().css('border','1px solid #D9D9D9');
            $('.hui  .vip_0,b').css('border', 'none');
        })
    </script>
{% endblock %}